<template>
  <div class="product-detail">
    <div class="container" v-loading="loading">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator=">" class="breadcrumb">
        <el-breadcrumb-item to="/">首頁</el-breadcrumb-item>
        <el-breadcrumb-item to="/category">{{ product?.category }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ product?.name }}</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="product-content" v-if="product">
        <!-- 產品主要信息 -->
        <div class="product-main">
          <!-- 左侧图片区域 -->
          <div class="product-gallery">
            <div class="main-image">
              <img :src="selectedImage" :alt="product.name"/>
              <div class="image-zoom" v-if="showZoom">
                <!-- 这里可以实现图片放大功能 -->
              </div>
            </div>

          </div>

          <!-- 右侧產品信息 -->
          <div class="product-info">
            <h1 class="product-title">{{ product.name }}</h1>
            <p class="product-subtitle">{{ product.description }}</p>

            <!-- 价格信息 -->
            <div class="price-section">
              <div class="current-price">
                <Currency/>
                {{ formatPrice(product.price) }}
              </div>
              <div v-if="product.originalPrice && product.originalPrice > product.price" class="original-price">
                <Currency/>
                {{ formatPrice(product.originalPrice) }}
              </div>
            </div>

            <!-- 评分和销量 -->
            <div class="rating-section">
              <el-rate :model-value="product.rating /  2" text-color="#ff9900" disabled show-score
                       :score-template="`${product.rating}`"/>
              <span class="review-count">({{ product.reviewCount }}人評價)</span>
              <span class="sales-count">月銷{{ product.sales }}件</span>
            </div>

            <!-- SKU规格选择 -->
            <div class="specs-section" v-if="product.skuList && product.skuList.length > 0">
              <div class="spec-group">
                <h4 class="spec-title">選擇規格:</h4>
                <div class="spec-options">
                  <el-button
                      v-for="sku in product.skuList"
                      :key="sku.Id"
                      :type="selectedSKU?.Id === sku.Id ? 'primary' : 'default'"
                      size="small"
                      @click="selectSKU(sku)"
                      :disabled="sku.status !== 1"
                  >
                    {{ sku.title }}
                    <span class="sku-price">(<Currency/>{{ formatPrice(sku.price) }})</span>
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 数量选择 -->
            <div class="quantity-section" v-if="!isMobile">
              <span class="quantity-label">數量:</span>
              <div class="quantity-selector">
                <button
                    class="quantity-btn quantity-btn-decrease"
                    @click="decreaseQuantity"
                    :disabled="quantity <= 1"
                >
                  <el-icon>
                    <Minus/>
                  </el-icon>
                </button>
                <input
                    class="quantity-input"
                    v-model.number="quantity"
                    @input="validateQuantity"
                    @blur="validateQuantity"
                    type="number"
                    :min="1"
                    :max="product.stock"
                />
                <button
                    class="quantity-btn quantity-btn-increase"
                    @click="increaseQuantity"
                    :disabled="quantity >= product.stock"
                >
                  <el-icon>
                    <Plus/>
                  </el-icon>
                </button>
              </div>
              <span class="stock-info">庫存{{ product.stock }}件</span>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button
                  type="primary"
                  size="default"
                  icon="ShoppingCart"
                  @click="addToCart"
                  :disabled="product.stock === 0"
                  class="cart-btn"
              >
                加入購物車
              </el-button>
              <el-button
                  type="danger"
                  size="default"
                  @click="buyNow"
                  :disabled="product.stock === 0"
                  class="buy-btn"
              >
                立即購買
              </el-button>
            </div>
          </div>
        </div>

        <!-- 產品详情tabs -->
        <div class="product-details">
          <el-tabs v-model="activeTab" class="detail-tabs">
            <el-tab-pane label="產品詳情" name="details">
              <div class="detail-content">
                <div v-if="product.details" class="product-description" v-html="descHtml"></div>
                <div v-else class="no-details">
                  <div class="no-details-icon">
                    <el-icon size="48" color="#b0b0b0">
                      <Document/>
                    </el-icon>
                  </div>
                  <p class="no-details-text">暂无產品详情</p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 推荐產品 -->
        <div class="recommended-products">
          <h3 class="section-title">推荐產品</h3>
          <div class="products-grid">
            <div
                v-for="item in recommendedProducts"
                :key="item.id"
                class="recommend-card"
                @click="goToProduct(item.id)"
            >
              <div class="recommend-image">
                <img :src="item.image" :alt="item.name"/>
                <div class="recommend-tags">
                  <span v-if="item.isHot" class="recommend-tag hot">熱銷</span>
                </div>
              </div>
              <div class="recommend-info">
                <h4 class="recommend-name">{{ item.name }}</h4>
                <div class="recommend-price">
                  <span class="current-price"><Currency/>{{ formatPrice(item.price) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, computed} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import {Document, Minus, Plus} from '@element-plus/icons-vue'
import {useCartStore} from '@/store'
import {fetchProductDetail, fetchRan} from '@/request/req.ts'
import {commonStore} from '@/store/common.ts'
import {formatPrice} from '@/utils/formatPrice.ts'
import router from "@/router";
import Currency from "@/components/common/Currency.vue";

const common = commonStore()
const route = useRoute()
const cartStore = useCartStore()

const loading = ref(false)
const product = ref<any>(null)
const selectedImage = ref('')
const selectedSpecs = ref<Record<string, string>>({})
const selectedSKU = ref<any>(null)
const quantity = ref(1)
const activeTab = ref('details')
const showZoom = ref(false)
const recommendedProducts = ref<any[]>([])

// 检测是否为移动端
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

const serverUrl = computed(() => {
  const item = common.getItemById(1)
  return item?.value
})
const productId = computed(() => parseInt(route.params.id as string))


/**
 * 获取產品详情
 */
const getProductDetail = async () => {
  loading.value = true
  try {
    const res: any = await fetchProductDetail({id: productId.value})
    console.log(res)

    // 映射API返回的数据到產品模型
    if (res && res.ShowGoods) {
      const goods = res.ShowGoods
      product.value = {
        id: goods.Id,
        title: '春季新品大促',
        name: goods.GoodsName,
        price: goods.Pirce,
        originalPrice: undefined,
        image: `${serverUrl.value}${goods.PicUrls}`,
        images: [`${serverUrl.value}${goods.PicUrls}`, `${serverUrl.value}${goods.PicUrls}`, `${serverUrl.value}${goods.PicUrls}`, `${serverUrl.value}${goods.PicUrls}`],
        description: goods.GoodsName,
        category: res.Types?.TypeName || '',
        brand: '',
        rating: goods.StarCount,
        reviewCount: 0,
        stock: 999,
        sales: parseInt(goods.SalesVolume) || 0,
        specs: [],
        details: goods.ProductDescription || '',
        tags: [],
        skuList: goods.SKUList || []
      }

      // 设置默认选中的图片
      selectedImage.value = product.value.image

      if (product.value.skuList && product.value.skuList.length > 0) {
        const firstAvailableSKU = product.value.skuList.find((sku: any) => sku.status === 1)
        if (firstAvailableSKU) {
          selectedSKU.value = firstAvailableSKU
          product.value.price = firstAvailableSKU.price
        }
      }

      // 初始化规格选择
      if (product.value.specs && product.value.specs.length > 0) {
        product.value.specs.forEach((spec: any) => {
          selectedSpecs.value[spec.name] = spec.options[0] || ''
        })
      }
    }
  } catch (error) {
    console.error('获取產品详情失败:', error)
    ElMessage.error('获取產品详情失败')
  } finally {
    loading.value = false
  }
}


const descHtml = computed(() => {
  const raw = product.value.details || ''
  return raw.replace(/src="(?!https?:)(\/[^"]+)"/g, (_m: string, p1: string) => `src="${serverUrl.value}${p1}"`)
})


/**
 * 随机產品
 */
const loadRandomProducts = async () => {
  try {
    const res = await fetchRan({id: 6})
    if (res && res.Success === 'true' && res.GoodsList) {
      const serverUrlItem = common.getItemById(1)
      const serverUrl = serverUrlItem ? serverUrlItem.value : ''

      recommendedProducts.value = res.GoodsList.map((item: any) => ({
        id: item.Id,
        name: item.GoodsName,
        description: item.ProductDescription || item.GoodsName,
        price: parseFloat(item.Pirce) || 0,
        originalPrice: parseFloat(item.Pirces?.replace(/,/g, '')) || undefined,
        image: serverUrl + '/images/UpLoadPic/' + item.PicUrls,
        brand: '',
        sales: parseInt(item.SalesVolume) || 0,
        rating: parseFloat((item.StarCount / 2).toFixed(1)) || 0,
        reviewCount: parseInt(item.Views) || 0,
        isNew: false,
        isHot: item.SalesVolume > 0,
        discount: undefined
      }))
    }
  } catch (error) {
    console.error('获取随机產品失败:', error)
  }
}

// 跳转到產品详情
const goToProduct = (id: number) => {
  router.push(`/product/${id}`)
}

// 数量选择器方法
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const increaseQuantity = () => {
  if (product.value && quantity.value < product.value.stock) {
    quantity.value++
  }
}

const validateQuantity = () => {
  if (!product.value) return

  if (isNaN(quantity.value) || quantity.value < 1) {
    quantity.value = 1
  } else if (quantity.value > product.value.stock) {
    quantity.value = product.value.stock
  }
}

// SKU选择方法
const selectSKU = (sku: any) => {
  selectedSKU.value = sku
  if (product.value) {
    product.value.price = sku.price
  }
}

// 加入购物车
const addToCart = () => {
  if (!product.value) return

  if (product.value.skuList && product.value.skuList.length > 0) {
    if (!selectedSKU.value) {
      ElMessage.warning('請選規格')
      return
    }

    if (selectedSKU.value.status !== 1) {
      ElMessage.warning('所選規格暫時無法購買')
      return
    }
  }

  // 检查是否选择了所有必需规格
  if (product.value.specs) {
    for (const spec of product.value.specs) {
      if (!selectedSpecs.value[spec.name]) {
        ElMessage.warning(`請選擇${spec.name}`)
        return
      }
    }
  }

  const finalPrice = selectedSKU.value ? selectedSKU.value.price : product.value.price

  for (let i = 0; i < quantity.value; i++) {
    cartStore.addToCart({
      id: selectedSKU.value ? `${product.value.id}_${selectedSKU.value.Id}` : product.value.id,
      name: product.value.name,
      price: finalPrice,
      image: product.value.image,
      skuId: selectedSKU.value?.Id,
      skuData: selectedSKU.value ? {
        Id: selectedSKU.value.Id,
        title: selectedSKU.value.title,
        price: selectedSKU.value.price,
        stock: selectedSKU.value.stock,
        status: selectedSKU.value.status
      } : undefined
    })
  }

  ElMessage.success('已成功加入購物車')
}

// 立即购买
const buyNow = () => {
  addToCart()
  // 跳转到购物车页面
  router.push('/cart')
}

onMounted(() => {
  getProductDetail()
  loadRandomProducts()
})
</script>

<style scoped>
.product-detail {
  background: var(--bg-tertiary);
  min-height: 100vh;
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  background: var(--bg-primary);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--border-primary);
}

.breadcrumb :deep(.el-breadcrumb__item) {
  color: var(--text-primary);
}

.breadcrumb :deep(.el-breadcrumb__item .el-breadcrumb__inner) {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-all);
}

.breadcrumb :deep(.el-breadcrumb__item .el-breadcrumb__inner:hover) {
  color: var(--primary-color);
}

.breadcrumb :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: var(--primary-color);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb :deep(.el-breadcrumb__separator) {
  color: var(--text-secondary);
  margin: 0 var(--spacing-sm);
}

.product-content {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-card);
}

/* 產品主要信息 */
.product-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4xl);
  padding: var(--spacing-3xl);
}

.main-image {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--border-secondary);
  box-shadow: var(--shadow-soft);
}

.main-image img {
  width: 100%;
  height: 100%;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
}

.product-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-md);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
}

.current-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.original-price {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  text-decoration: line-through;
}

.rating-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-secondary);
}

.review-count,
.sales-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.quantity-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-secondary);
  flex-wrap: wrap;
}

.quantity-label {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  white-space: nowrap;
}

.quantity-selector {
  display: flex;
  align-items: center;
  width: 120px;
  height: 32px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  overflow: hidden;
}

.quantity-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
  outline: none;
  padding: 0;
  margin: 0;
}

.quantity-btn:hover:not(:disabled) {
  background: var(--primary-color);
  color: var(--text-light);
}

.quantity-btn:disabled {
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: not-allowed;
}

.quantity-btn-decrease {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.quantity-btn-increase {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.quantity-input {
  flex: 1;
  height: 30px;
  border: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: center;
  font-size: var(--font-size-sm);
  outline: none;
  margin: 0;
  padding: 0 4px;
  -moz-appearance: textfield; /* 隐藏 Firefox 的数字输入框箭头 */
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* 隐藏 Chrome/Safari 的数字输入框箭头 */
  margin: 0;
}

.quantity-input:focus {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.stock-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  align-items: stretch;
}

.cart-btn,
.buy-btn {
  flex: 1;
  height: 44px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  min-width: 0;
}

.cart-btn {
  background: var(--gradient-primary);
  border: none;
  box-shadow: var(--shadow-button);
}

.cart-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.buy-btn {
  background: var(--gradient-danger);
  border: none;
  box-shadow: var(--shadow-button);
}

.buy-btn:hover {
  background: linear-gradient(135deg, var(--danger-light), var(--danger-color));
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.cart-btn:disabled,
.buy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 產品详情tabs */
.product-details {
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--border-secondary);
}

/* 自定义标签页样式 */
.detail-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: transparent;
}

.detail-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0;
}

.detail-tabs :deep(.el-tabs__nav) {
  border: none;
}

.detail-tabs :deep(.el-tabs__item) {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  border: none;
  padding: 0 var(--spacing-xl);
  height: 50px;
  line-height: 50px;
  transition: var(--transition-all);
}

.detail-tabs :deep(.el-tabs__item:hover) {
  color: var(--primary-color);
}

.detail-tabs :deep(.el-tabs__item.is-active) {
  color: var(--primary-color);
  font-weight: var(--font-weight-semibold);
}

.detail-tabs :deep(.el-tabs__active-bar) {
  background-color: var(--primary-color);
  height: 3px;
}

.detail-tabs :deep(.el-tabs__content) {
  padding: 20px 0;
}

/* 產品详情内容 */
.product-description {
  line-height: 1.6;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.product-description :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-card);
  transition: var(--transition-all);
}

.product-description :deep(img:hover) {
  transform: scale(1.02);
  box-shadow: var(--shadow-medium);
}

.product-description :deep(p) {
  margin-bottom: 16px;
  line-height: 1.8;
}

.product-description :deep(h1),
.product-description :deep(h2),
.product-description :deep(h3),
.product-description :deep(h4),
.product-description :deep(h5),
.product-description :deep(h6) {
  color: #ff6900;
  margin: 24px 0 16px 0;
  font-weight: 600;
}

.product-description :deep(h1) {
  font-size: 24px;
  border-bottom: 2px solid #ff6900;
  padding-bottom: 8px;
}

.product-description :deep(h2) {
  font-size: 20px;
}

.product-description :deep(h3) {
  font-size: 18px;
}

.product-description :deep(ul),
.product-description :deep(ol) {
  margin: 16px 0;
  padding-left: 24px;
}

.product-description :deep(li) {
  margin-bottom: 8px;
  line-height: 1.6;
}

.product-description :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background: rgba(52, 73, 94, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.product-description :deep(th),
.product-description :deep(td) {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #34495e;
}

.product-description :deep(th) {
  background: rgba(255, 105, 0, 0.1);
  color: #ff6900;
  font-weight: 600;
}

.product-description :deep(td) {
  color: #e8f4f8;
}

.product-description :deep(strong),
.product-description :deep(b) {
  color: #ff6900;
  font-weight: 600;
}

.product-description :deep(blockquote) {
  background: rgba(255, 105, 0, 0.05);
  border-left: 4px solid #ff6900;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.product-description :deep(code) {
  background: rgba(52, 73, 94, 0.5);
  color: #ff6900;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.product-description :deep(pre) {
  background: rgba(52, 73, 94, 0.5);
  color: #e8f4f8;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 16px 0;
}

/* 空状态 */
.no-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.no-details-icon {
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-details-text {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  margin: 0;
}

.rating-bar span:first-child {
  width: 40px;
}

.rating-bar .el-progress {
  flex: 1;
}

.rating-bar span:last-child {
  width: 40px;
  text-align: right;
  color: #666;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

/* 推荐產品 */
.recommended-products {
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--border-secondary);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

/* 推荐產品卡片样式 */
.recommend-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-all);
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
}

.recommend-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  border-color: var(--primary-color);
}

.recommend-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.recommend-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.recommend-card:hover .recommend-image img {
  transform: scale(1.05);
}

.recommend-tags {
  position: absolute;
  top: 8px;
  left: 8px;
}

.recommend-tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-rounded);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--text-light);
  line-height: 1.2;
}

.recommend-tag.hot {
  background: var(--gradient-danger);
}

.recommend-info {
  padding: 16px;
}

.recommend-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.recommend-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.recommend-price .current-price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
}

.specs-section {
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-secondary);
}

.spec-group {
  margin-bottom: var(--spacing-lg);
}

.spec-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.spec-options .el-button {
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-dark);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: var(--transition-all);
}

.spec-options .el-button:hover {
  border-color: var(--primary-color);
  background: var(--primary-bg);
  color: var(--primary-color);
}

.spec-options .el-button.el-button--primary {
  background: var(--gradient-primary);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.spec-options .el-button.el-button--primary:hover {
  background: var(--gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.spec-options .el-button:disabled {
  background: var(--bg-primary);
  border-color: var(--border-secondary);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.sku-price {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--primary-color);
  margin-left: var(--spacing-xs);
}

.el-button--primary .sku-price {
  color: var(--text-light);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .product-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .breadcrumb {
    padding: 8px 12px;
    margin-bottom: 12px;
  }

  .product-main {
    padding: 16px;
    gap: 20px;
  }

  .main-image {
    height: 300px;
    margin-bottom: 12px;
  }

  .product-title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .product-subtitle {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .price-section {
    padding: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .current-price {
    font-size: 28px;
  }

  .original-price {
    font-size: 16px;
  }

  .rating-section {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .spec-title {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .spec-options {
    gap: 6px;
  }

  .spec-options .el-button {
    font-size: 13px;
    padding: 6px 10px;
  }

  .sku-price {
    font-size: 10px;
  }

  .action-buttons {
    gap: 8px;
    margin-bottom: 24px;
  }

  .cart-btn,
  .buy-btn {
    height: 48px;
    font-size: 16px;
    flex: 1;
    min-width: 0;
  }

  .product-details {
    padding: 16px;
  }

  .detail-tabs :deep(.el-tabs__item) {
    padding: 0 12px;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
  }

  .product-description :deep(h1) {
    font-size: 20px;
  }

  .product-description :deep(h2) {
    font-size: 18px;
  }

  .product-description :deep(h3) {
    font-size: 16px;
  }

  .product-description :deep(img) {
    margin: 12px 0;
  }

  .no-details {
    padding: 40px 16px;
  }

  .no-details-icon {
    margin-bottom: 12px;
  }

  .no-details-text {
    font-size: 14px;
  }

  .rating-bar span:first-child {
    width: 30px;
  }

  .rating-bar span:last-child {
    width: 30px;
  }

  .review-images img {
    width: 60px;
    height: 60px;
  }

  .recommended-products {
    padding: 16px;
  }

  .section-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }

  .breadcrumb {
    padding: 6px 8px;
    font-size: 12px;
  }

  .product-main {
    padding: 12px;
    gap: 16px;
  }

  .main-image {
    height: 250px;
  }

  .product-title {
    font-size: 18px;
  }

  .product-subtitle {
    font-size: 13px;
  }

  .price-section {
    padding: 12px;
  }

  .current-price {
    font-size: 24px;
  }

  .original-price {
    font-size: 14px;
  }

  .rating-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .spec-title {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .spec-options .el-button {
    font-size: 12px;
    padding: 4px 8px;
  }

  .sku-price {
    font-size: 9px;
  }

  .action-buttons {
    margin-bottom: 20px;
  }

  .cart-btn,
  .buy-btn {
    height: 44px;
    font-size: 15px;
    flex: 1;
    min-width: 0;
  }


  .product-details {
    padding: 12px;
  }

  .detail-tabs :deep(.el-tabs__item) {
    padding: 0 8px;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
  }

  .product-description :deep(h1) {
    font-size: 18px;
  }

  .product-description :deep(h2) {
    font-size: 16px;
  }

  .product-description :deep(h3) {
    font-size: 14px;
  }

  .product-description :deep(img) {
    margin: 8px 0;
  }

  .product-description :deep(p) {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .no-details {
    padding: 30px 12px;
  }

  .no-details-text {
    font-size: 13px;
  }

  .rating-bar span:first-child {
    width: 25px;
  }

  .rating-bar span:last-child {
    width: 25px;
  }

  .review-images img {
    width: 50px;
    height: 50px;
  }

  .recommended-products {
    padding: 12px;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
</style>
